<template>
  <v-chart :option="option" />
</template>

<script setup>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  MarkLineComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  LineChart,
  MarkLineComponent
])

const startdate = [1, 1, 1, 1, 1]// 最近五次月经开始的时间
const period = [5, 6, 5, 5, 5]// 最近五次经期长度
const cycle = [30, 27, 34, 34, 39]// 最近五次周期长度
const idealperiod = 28 // 理想周期
const option = getBarOption(startdate, period, cycle, idealperiod)
function getBarOption (startdate, period, cycle, idealperiod) {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      itemWidth: 23,
      itemHeight: 10,
      itemGap: 25,
      data: ['经期', '周期', '理想周期']
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 15,
      top: 40,
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: startdate, // 最近5次月经开始的时间
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#999',
          // rotate:30,
          formatter: '{value}'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#999'
        }
      }

    ],

    series: [
      {
        name: '经期',
        type: 'bar',
        // stack: 'all',
        barCategoryGap: '55%',
        z: '2',
        itemStyle: {
          borderRadius: [3, 3, 0, 0]

        },
        label: {
          show: true,
          fontSize: 9

        },
        color: '#8b7ff5',
        data: period// 最近5次经期长度

      },
      {
        name: '周期',
        type: 'bar',
        barCategoryGap: '55%',
        // stack:'all',
        itemStyle: {
          borderRadius: [3, 3, 0, 0]
        },
        z: '1',
        borderRadius: 5,
        barGap: '-100%',
        label: {
          normal: {
            fontSize: 10,
            show: true,
            position: 'inside'
          }
        },
        color: '#c1bcf3',
        data: cycle// 最近5次周期长度

      },
      {
        name: '理想周期',
        type: 'line',
        markLine: {
          symbol: 'none',
          lineStyle: {
            color: '#8b7ff5',
            cap: 'square'
          },
          data: [{
            name: '理想周期',
            yAxis: idealperiod// 从设置界面获取
          }]
        }
      }
    ]
  }
}
/* 以上是绘制柱状图的代码 */
</script>
